<template>
  <div class="wrap">
    <div class="mainTitle">活动管理/排名奖励/查看详情</div>
    <div class="listerGroup">
      <div class="list" style="margin-bottom:20px">
        <div class="subTitle">机构ID</div>
        <el-input v-model="form.codes" style="width:300px;" placeholder="请输入内容"></el-input>
      </div>
      <div class="list" style="margin-bottom:20px">
        <div class="subTitle">机构名称</div>
        <el-input v-model="form.name" style="width:300px;" placeholder="请输入内容"></el-input>
      </div>
      <div class="list"></div>
      <div class="list">
        <div class="subTitle">交易数量</div>
        <el-input-number
        class="blk"
          style="width:150px !important"
          v-model="form.transactionTo"
          controls-position="right"
          @change="handleChangeless"
          :min="1"
        ></el-input-number>
        -
        <el-input-number
        class="blk"
          style="width:150px !important"
          v-model="form.transactionFrom"
          controls-position="right"
          @change="handleChangemany"
          :min="1"
        ></el-input-number>
      </div>
      <div class="list">
        <div class="subTitle">是否入榜</div>
        <el-select style="width:300px" v-model="form.bdlist" placeholder="请选择">
          <el-option
            v-for="item in optionsList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="list">
        <div class="subTitle">奖励状态</div>
        <el-select style="width:300px" v-model="form.rewardState" placeholder="请选择">
          <el-option
            v-for="item in rewardStateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="btnGroup">
        <el-button type="primary">搜索</el-button>
        <el-button @click="result">重置</el-button>
      </div>
    </div>

    <div class="activeList">活动列表</div>

    <el-table
    class="blks"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="当前排名" width="200">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="name" label="机构ID" width="200"></el-table-column>
      <el-table-column prop="name" label="机构名称" width="300"></el-table-column>
      <el-table-column prop="name" label="交易总量" width="300"></el-table-column>
      <el-table-column label="是否入境" width="200">
        <template slot-scope="scope">
          <div :class="2>1?'active':''" style="color:#67C23A">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="奖励状态" width="300">
        <template slot-scope="scope">
          <div class="active">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column> -->
    </el-table>
    <div style="margin-top: 60px">
      <el-button @click="quan" style="margin-right:10px">全选</el-button>
      <span class="exports">批量导出</span>
    </div>
    <div class="info">
      <div>共400条</div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="500"
        @current-change="qiehuan"
        @prev-click="prev"
        @next-click="next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedAll: true,
      //需要提交的数据
      form: {
        codes: "",
        name: "",
        transactionTo: 1, //交易数量前
        transactionFrom: 1, //加以数量后
        bdlist: "", //是否入帮
        rewardState: "", //奖励状态
      },
      //入帮选项
      optionsList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      // 奖励状态
      rewardStateOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      //活动列表
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    //交易最低的
    handleChangeless(val) {
      console.log(val);
    },
    //交易最高的
    handleChangemany(val) {
      console.log(val);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    prev(val){
        console.log(val)
    },
    next(val){
        console.log(val)
    },
    qiehuan(val){
        console.log(val)
    },
    quan() {
      if (this.checkedAll) {
        this.tableData.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    result() {
      this.form = {
        codes: "",
        name: "",
        transactionTo: 1, //交易数量前
        transactionFrom: 1, //加以数量后
        bdlist: "", //是否入帮
        rewardState: "", //奖励状态
      };
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 96%;
  margin: 0 auto;
}
.mainTitle {
  font-size:16px;
  /* font-weight: bold; */
  height: 50px;
  margin-top: 40px;
  margin-bottom: 20px;
  /* line-height: 50px; */
}
.list {
  display: flex;
  width: 33.3333%;
  align-items: center;
}
.listerGroup {
  display: flex;
  flex-wrap: wrap;
  background: #f9fafc;
  padding: 30px;
  /* padding-left: 30px; */
  /* padding-right: 30px; */
}
.subTitle {
  margin-right: 10px;
}
.btnGroup {
  margin-top: 60px;
}
.activeList {
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  font-size: 16px;
  width: 80px;
  border-bottom: 2px solid black;
  margin-top: 50px;
  margin-bottom: 10px;
}
.active {
  color: #67c23a !important;
}
.exports {
  color: #409eff;
}
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
.blk .el-input{
  width: 150px !important;
}
/deep/ .blk .el-input__inner{
  width: 150px;
}



/* .blk{

} */
</style>